<template>
  <div>
    <el-upload
      class="upload-demo"
      accept=".mp3"
      action="http://gwy-oss.oss-cn-shenzhen.aliyuncs.com"
      :data="dataObj"
      ref="upload"
      drag
      :before-upload="beforeUpload"
      :on-remove="handleRemove"
      :on-preview="handlePreview"
      :on-change="handleChange"
      :limit="maxCount"
      :on-exceed="handleExceed"
      :multiple="true"
      :auto-upload="false"
      :on-success="handleSuccess"
      :on-error="handleUploadError"
    >
<!--      :file-list="value"-->
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将视频拖到此处，或<em>点击上传</em></div>
<!--      <i class="  el-icon-plus"></i>-->
<!--      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>-->
    </el-upload>
<!--    <div v-for="(item,index) in upLoadLists" :key="index">-->
<!--      <video   width="10%" :src="item"  />-->
<!--&lt;!&ndash;      <div>{{ item }}</div>&ndash;&gt;-->
<!--    </div>-->

<!--    <el-dialog :visible.sync="dialogVisible" append-to-body="true" style="left:25%;width: 50%;text-align: center">-->
<!--      -->
<!--    </el-dialog>-->
    <div style="margin-top: 1%">
      <el-button v-if="showButton" @click="submitUpload">上传</el-button>

<!--      <el-button @click="clickSave">保存</el-button>-->
    </div>

  </div>
</template>
<script>

import {getUUID} from '../../utils/uuid'
export default {
  name: "multiUpload",
  props: {
    //图片属性数组
    value: {
      Array,
      default: ''
    },
    //最大上传图片数量
    maxCount: {
      type: Number,
      default: 15,
    },
    showButton:{
      type:Boolean,
      default:true
    }
  },
  data() {
    return {
      dataObj: {
        policy: "",
        signature: "",
        key: "",
        ossaccessKeyId: "",
        dir: "",
        host: "",
        uuid: "",
      },
      index:0,
      dialogVisible: false,
      dialogVideoUrl: null,
      fileLists:[],
      //因为fileList中有另一个对象
      upLoadLists:[],
      img:''
    };
  },
  computed: {
    originFileList() {
      //将原有视频数据回显

      let fileList = [];
      // console.log("**********"+this.value)
      if (this.value !== ''){
        for (let i = 0; i < this.value.length; i++) {
          fileList.push({ url: this.value[i] });
        }
      }
      // fileList.push({url:"https://gwy-oss.oss-cn-shenzhen.aliyuncs.com/2021-12-04/4e8de6bee29441999ecc4ae2ec2f69d5_312745.jpg"})
      return fileList;
    },
  },
  mounted() {
    // 将数据库的视频数据加入文件
    this.fileLists = this.value
    // console.log(typeof this.value)
    this.upLoadLists = this.value
    // console.log("this.uploadList")
    console.log(this.value)
    // console.log(typeof this.upLoadLists)
    //在原有的集数上增加
    if (this.value != null){
      this.index = this.value.length
    }else{
      this.index = 0
    }
    // console.log(this.upLoadLists)
    // console.log(this.fileLists)

  },
  methods: {

    //检测改变
    handleChange(file,fileList){
      this.fileLists = fileList
    },
    //改变删除
    handleRemove(file, fileList) {
      this.fileLists = fileList
    },
    handlePreview(file) {
      this.dialogVisible = true;
      this.dialogVideoUrl = file.url;
    },
    beforeUpload(file) {

      // if (this.value.length !== 0){
      //   if (this.upLoadLists.length === this.value.length){
      //     this.$message({message:'请选择文件在上传',type:'error',customClass:'zZindex'})
      //   }
      // }
      var testmsg=file.name.substring(file.name.lastIndexOf('.')+1)
      const extension = testmsg === 'mp3' || testmsg === 'MP3';
      if (!extension) {
        this.$message.error('请上传正确的视频格式');
        return false;
      }
    },
    handleSuccess(res,file,fileList){
      // let num = fileList.length
      this.index++;

      let video ="https://gwy-oss.oss-cn-shenzhen.aliyuncs.com/"+this.dataObj.key.replace("_${filename}","_"+file.raw.name)
      console.log(video)
      const data = {

        name:file.name,
        url:video,
        index:this.index
      }
      // console.log("1")
      // console.log(this.upLoadLists)
      // console.log(data)
      // this.fileLists.push(data)
      // console.log(this.upLoadLists)
      // console.log("2")
      this.upLoadLists.push(data)
      // console.log("3")
      // console.log(this.upLoadLists)
      // this.upLoadLists.push(data)
      this.$emit('getVideo',this.upLoadLists)


    },
    async submitUpload() {
      let _self = this;
      //获取oss访问数据
      await  new Promise((resolve, reject) => {
        this.$http({
          url: this.$http.adornUrl("/oss/policy/video"),
          method: "get"
        }).then((res) => {
          let response=res.data
          _self.dataObj.policy = response.data.policy;
          _self.dataObj.signature = response.data.signature;
          _self.dataObj.ossaccessKeyId = response.data.accessid;
          _self.dataObj.key = response.data.dir + getUUID() + "_${filename}";
          _self.dataObj.dir = response.data.dir;
          _self.dataObj.host = response.data.host;
          resolve(true);
        })
          .catch((err) => {
            reject(false);
          });
      });
      //如果没有视频就点上传 提示选择文件在上传


      //提交
      this.$refs.upload.submit()

    },
    handleExceed(files, fileList) {
      this.$message({
        message: "最多只能上传" + this.maxCount + "个视频",
        type: "warning",
        duration: 1000,
      });
    },
    handleUploadError(res,file){
      this.$message.error(file.name+"传输失败！")
    },
    clickSave(){
      this.$emit('disShow')
    }
  },

};
</script>
<style>
/*遮罩层比重 ---JOJO*/
.zZindex {
  z-index:3000 !important;
}
</style>


